<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <style type="text/css">
	body {
		padding: 4%;
		margin:0;
		height: auto;
		min-height: 200px;
	}
	#input {
		    width: 100%;
            overflow-y: auto;
            overflow-x: hidden;
            padding: 10px;
            border: 1px solid #fff;
            box-sizing: border-box;
            min-height: initial;
            min-height: 200px; /* 设置最小高度 */
            outline: none;
	}
	
    #input:empty::before{  
        color:#C2C2C2;  
        content:attr(placeholder);  
    }
      
	img {
		width: 95%;
		height: auto;
		display: block;
		border-radius: 10px;
	}

    </style>
</head>
<body>
<div contenteditable id="input" placeholder="请输入文章正文"></div>
<script type="text/javascript">

		var input = document.getElementById("input");
		window.onload = () => {
		    input.focus();
		}
		input.onkeyup = () => {
		    scrollToCaret();
			//这里是监听后的事件处理
        	window.location.href = "re-callback://" + encodeURI(getHtml());
		}
		var getHtml=function(){
			return input.innerHTML;
		}
		function insertHtml(html){
            document.execCommand('insertHTML',false,html);
            document.body.scrollTop=document.body.scrollHeight;
        	window.location.href = "re-callback://" + encodeURI(getHtml());
        }
        function insertImage(url){
            var html = "<img src='" + url + "'/><br>";
            insertHtml(html);
            scrollToCaret();
        }
        
        function setHtml(html){
            alert(html);
            alert(decodeURIComponent(html.replace(/\+/g, '%20')));
        	input.innerHTML=decodeURIComponent(html.replace(/\+/g, '%20'));
        }
        function scrollToCaret() {
            var element = document.getElementById("input");
            var selection = window.getSelection();
            if (selection.rangeCount > 0) {
                var range = selection.getRangeAt(0);
                var rect = range.getBoundingClientRect();
                var elementRect = element.getBoundingClientRect();
                if (rect.bottom > elementRect.bottom || rect.top < elementRect.top) {
                    element.scrollTop = element.scrollTop + (rect.top - elementRect.top);
                }
            }
        }
</script>
</body>
</html>